<script setup lang="ts">
import { ref } from "vue";
import { getAddressList, AddressItem, deleteAddress } from "@/api/address";
import { onLoad, onShow } from "@dcloudio/uni-app";
import useAddressStore from "@/store/address";

const addressList = ref<AddressItem[]>([]);
onShow(async () => {
  const res = await getAddressList();
  addressList.value = res;
});

// 删除地址
const onDeleteAddress = async (id: string) => {
  // console.log("点击了删除", id);
  // 调用删除接口
  await deleteAddress(id);
  // 提示用户
  uni.showToast({
    title: "删除成功",
  });
  // 重新获取列表数据
  const res = await getAddressList();
  addressList.value = res;
};
const addressStore = useAddressStore();
const props = defineProps<{
  from: string;
}>();
// 点击地址列表中的某一个地址
const changeAddress = (item: AddressItem) => {
  // 从创建订单页面跳转过来的，才做相应的操作
  if (props.from === "order") {
    // 将用户选择的地址更新到全局数据
    addressStore.changeSeletedAddress(item);
    // 跳转到上一页
    uni.navigateBack({});
  }
};

// let fromPage = "";
// onLoad(({ from }) => {
//   if (from) {
//     fromPage = from;
//   }
// });
</script>

<template>
  <view class="viewport">
    <!-- 地址列表 -->
    <scroll-view enhanced scroll-y>
      <view class="address">
        <uni-swipe-action>
          <uni-swipe-action-item
            v-for="item in addressList"
            :key="item.id"
            class="swipe-cell"
          >
            <view class="item" @tap="changeAddress(item)">
              <view class="user">
                {{ item.receiver }}
                <text>{{ item.contact }}</text>
                <text class="badge" v-if="item.isDefault === 1"> 默认 </text>
              </view>
              <view class="locate">
                {{ item.fullLocation }}{{ item.address }}
              </view>
              <navigator
                :url="`./form?id=${item.id}`"
                class="edit"
                hover-class="none"
                @tap.stop
              >
                修改
              </navigator>
            </view>
            <template v-slot:right>
              <view class="swipe-cell-action">
                <button class="delete-button" @tap="onDeleteAddress(item.id)">
                  删除
                </button>
              </view>
            </template>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>
      <view v-if="false" class="blank">收货地址为空~</view>
    </scroll-view>
    <!-- 添加按钮 -->
    <view class="add-btn">
      <navigator hover-class="none" url="./form">新建地址</navigator>
    </view>
  </view>
</template>

<style>
page {
  height: 100%;
  overflow: hidden;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f4f4f4;
}

.viewport scroll-view {
  padding-top: 20rpx;
}

.address {
  padding: 0 20rpx;
  margin: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
}

.address .item {
  line-height: 1;
  padding: 40rpx 10rpx 38rpx;
  border-bottom: 1rpx solid #ddd;
  position: relative;
}

.address .swipe-cell:last-child .item {
  border: none;
}

.address .item .user {
  font-size: 28rpx;
  margin-bottom: 20rpx;
  color: #333;
}

.address .item .user text {
  color: #666;
}

.address .item .user .badge {
  display: inline-block;
  padding: 4rpx 10rpx 2rpx 14rpx;
  margin: 2rpx 0 0 10rpx;
  font-size: 26rpx;
  color: #27ba9b;
  border-radius: 6rpx;
  border: 1rpx solid #27ba9b;
}

.address .item .locate {
  line-height: 1.6;
  font-size: 26rpx;
  color: #333;
}

.swipe-cell-action {
  height: 100%;
}

.swipe-cell-action .delete-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 100%;
  font-size: 28rpx;
  color: #fff;
  border-radius: 0;
  padding: 0;
  background-color: #cf4444 !important;
}

.address .item .edit {
  position: absolute;
  top: 36rpx;
  right: 30rpx;

  padding: 2rpx 0 2rpx 20rpx;
  border-left: 1rpx solid #666;
  font-size: 26rpx;
  color: #666;
  line-height: 1;
}

.add-btn {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}

.blank {
  margin-top: 300rpx;
  text-align: center;
  font-size: 32rpx;
  color: #888;
}
</style>
